<template>
  <div id="vip">
    <el-row>
      <mu-appbar title="vip配置" style="background-color:#409EFF">
        <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'GmMenu' }"/>
      </mu-appbar>
    </el-row>

    <el-row>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-input
          v-model="form.accountId"
          placeholder="查找账号"
          @blur="handleSelect"
        ></el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-checkbox v-model="form.isRecommend" >被推荐</el-checkbox>
        <el-checkbox v-model="form.isVip9" >vip9</el-checkbox>
        <el-checkbox v-model="form.isApply" >申请好友</el-checkbox>
        <el-checkbox v-model="form.isAdminVip9" >官方vip9标识</el-checkbox>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-col>
    </el-row>

    <el-tabs type="border-card">
      <el-tab-pane label="被推荐账号">
        <el-table
          :data="tableDataRecommend"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="玩家ID">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 1">vip9玩家</span>
              <span v-if="scope.row.type === 2">客服</span>
              <span v-if="scope.row.type === 3">vip客服</span>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <center>
            <el-pagination
              small
              layout="prev, pager, next"
              :total="conditionRecommend.total"
              :page-size="conditionRecommend.pageSize"
              :current-page="conditionRecommend.currentPage"
              @current-change="handleCurrentChangeRecommend">
            </el-pagination>
          </center>
        </el-row>

      </el-tab-pane>

      <el-tab-pane label="vip9账号">
        <el-table
          :data="tableDataVip9"
          style="width: 100%">
          <el-table-column
            prop="uid"
            label="玩家UID">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称">
          </el-table-column>
        </el-table>

        <el-row>
          <center>
            <el-pagination
              small
              layout="prev, pager, next"
              :total="conditionVip9.total"
              :page-size="conditionVip9.pageSize"
              :current-page="conditionVip9.currentPage"
              @current-change="handleCurrentChangeVip9">
            </el-pagination>
          </center>
        </el-row>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import Qs from 'qs'
  export default {
    data () {
      return {
        form: {
          accountId: '',
          isRecommend: false,
          isVip9: false,
          isApply: false,
          isAdminVip9: false
        },
        tableDataRecommend: [],
        tableDataVip9: [],
        conditionRecommend: {
          total: 0,
          pageSize: 10,
          currentPage: 1
        },
        conditionVip9: {
          total: 0,
          pageSize: 10,
          currentPage: 1
        }
      }
    },
    methods: {
      onSubmit () {
        if (this.form.accountId === '') {
          return false
        }
        let data = Qs.stringify(this.form)
        this.$axios({
          method: 'post',
          url: '/api/AgentService.setRecommendVip9Apply',
          data
        })
        .then(response => {
          if (response.data.status === 'success') {
            this.$message.success('保存成功')
            this.getRecommendAccounts()
            this.getVip9Accounts()
            this.form.accountId = ''
            this.form.isRecommend = false
            this.form.isVip9 = false
            this.form.isApply = false
            this.form.isAdminVip9 = false
          } else {
            this.$message({
              showClose: true,
              message: response.data.cause,
              type: 'warning'
            })
          }
        })
        .catch(e => {
          this.$message({
            showClose: true,
            message: '服务器出小差了1',
            type: 'warning'
          })
        })
      },
      getRecommendAccounts () {
        let data = Qs.stringify(this.conditionRecommend)
        this.$axios({
          method: 'post',
          url: '/api/AgentService.getRecommendAccounts',
          data
        })
        .then(response => {
          if (response.data.status === 'success') {
            this.tableDataRecommend = response.data.data
            this.conditionRecommend.total = response.data.total
          } else {
            this.$message({
              showClose: true,
              message: response.data.cause,
              type: 'warning'
            })
          }
        })
        .catch(e => {
          this.$message({
            showClose: true,
            message: '服务器出小差了2',
            type: 'warning'
          })
        })
      },
      getVip9Accounts () {
        let data = Qs.stringify(this.conditionVip9)
        this.$axios({
          method: 'post',
          url: '/api/AgentService.getVip9Accounts',
          data
        })
        .then(response => {
          if (response.data.status === 'success') {
            this.tableDataVip9 = response.data.data
            this.conditionVip9.total = response.data.total
          } else {
            this.$message({
              showClose: true,
              message: response.data.cause,
              type: 'warning'
            })
          }
        })
        .catch(e => {
          this.$message({
            showClose: true,
            message: '服务器出小差了3',
            type: 'warning'
          })
        })
      },

      handleCurrentChangeRecommend (val) {
        this.conditionRecommend.currentPage = val
        this.getRecommendAccounts()
      },

      handleCurrentChangeVip9(val) {
        this.conditionVip9.currentPage = val
        this.getVip9Accounts()
      },

      querySearchAsync(str, cb) {
        let data = Qs.stringify({str: str})
        this.$axios({
          method: 'post',
          url: '/api/AgentService.searchAccounts',
          data
        })
        .then(response => {
          if (response.data.status === 'success') {

            let result = []
            for (let item of response.data.data) {
              result.push({
                value: item
              })
            }
            cb(result)

          } else {
            cb('')
          }
        })
        .catch(e => {
          console.log(e)
          this.$message({
            showClose: true,
            message: '服务器出小差了4',
            type: 'warning'
          })
        })
      },
      handleSelect () {
        let data = Qs.stringify({id: this.form.accountId})
        this.$axios({
          method: 'post',
          url: '/api/AgentService.getRecommendVip9Apply',
          data
        })
        .then(response => {
          if (response.data.status === 'success') {
            this.form.isRecommend = response.data.isRecommend
            this.form.isVip9 = response.data.isVip9
            this.form.isApply = response.data.isApply
            this.form.isAdminVip9 = response.data.isAdminVip9
          } else {
            this.$message({
              showClose: true,
              message: response.data.cause,
              type: 'warning'
            })
          }
        })
        .catch(e => {
          console.log(e)
          this.$message({
            showClose: true,
            message: '服务器出小差了5',
            type: 'warning'
          })
        })
      }
    },
    mounted () {
      this.getVip9Accounts()
      this.getRecommendAccounts()
    }
  }
</script>

<style>
#vip > .el-row {
  margin-bottom: 16px;
}
#vip >  .el-col {
  margin-bottom: 8px;
}
</style>
